<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
      <el-form-item label="商品编号" prop="commodityNo">
        <el-input v-model="queryParams.commodityNo" clearable placeholder="请输入商品编号" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="商品名称" prop="commodityName1">
        <el-input v-model="queryParams.commodityName1" clearable placeholder="请输入商品名称" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="商品类型" prop="commodityType">
        <el-cascader ref="commodityType" v-model="commodityType" :options="options" :props="props" clearable></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['erp:ErpCommodity:add']" icon="el-icon-plus" plain size="mini" type="primary" @click="handleAdd">新增商品</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermi="['erp:ErpCommodity:import']" icon="el-icon-upload2" plain size="mini" type="primary" @click="handleImport">批量导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermi="['erp:ErpCommodity:export']" icon="el-icon-download" plain size="mini" type="primary" @click="handleExport">列表导出</el-button>
      </el-col>
      <right-toolbar :columns="columns" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row :gutter="20">
      <!--商品类型数据-->
      <el-col :span="3" :xs="24">
        <div class="head-container">
          <el-tree ref="tree" :data="commodityTypeOptions" :expand-on-click-node="false" :props="defaultProps" default-expand-all highlight-current node-key="id" @node-click="handleNodeClick"/>
        </div>
      </el-col>
      <!--商品数据-->
      <el-col :span="21" :xs="24">
        <el-table v-loading="loading" :data="ErpCommodityList" row-key="commodityId" @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" align="center" :reserve-selection="true" width="50" />
          <el-table-column v-if="columns[0].visible" align="center" label="商品编号" sortable prop="commodityNo" width="150" />
          <el-table-column v-if="columns[1].visible" align="center" label="商品名称" sortable prop="commodityName1" />
          <el-table-column v-if="columns[2].visible" align="center" label="商品类别" sortable prop="commodityType" width="150" />
          <el-table-column v-if="columns[3].visible" align="center" label="品牌" sortable prop="commodityBrand" width="150"/>
          <el-table-column v-if="columns[4].visible" align="center" label="规格" prop="commoditySpec" width="150"/>
          <el-table-column v-if="columns[5].visible" align="center" label="基本单位" prop="unitName1" width="150"/>
          <el-table-column v-if="columns[6].visible" align="center" label="成本价" sortable prop="costPrice" width="150">
            <template slot-scope="scope">
              <span>{{ formattedNumber(scope.row.costPrice) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="columns[7].visible" align="center" label="当前库存" prop="numberList" width="150">
            <template slot-scope="scope">
              <span>
                {{ numberSum(scope.row.numberList) }}
                <el-tooltip effect="light" placement="bottom">
                  <div slot="content">
                    <div v-for="item in scope.row.numberList" v-if="item.wareId && item.projectId == null" :key="item">
                      <span>{{ item.wareName }}：</span><span>{{ item.commodityNumber }}</span>
                    </div>
                  </div>
                  <el-button circle icon="el-icon-search" size="mini"></el-button>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
          <el-table-column v-if="columns[8].visible" align="center" label="库存上限" prop="inventoryLimit" width="150"/>
          <el-table-column v-if="columns[9].visible" align="center" label="库存下限" prop="inventoryLowerLimit" width="150"/>
          <el-table-column v-if="columns[10].visible" align="center" class-name="small-padding fixed-width" label="操作" width="150">
            <template slot-scope="scope">
              <el-button v-hasPermi="['erp:ErpCommodity:view']" size="mini" type="text" @click="handleView(scope.row)">详情</el-button>
              <el-button v-hasPermi="['erp:ErpCommodity:edit']" size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
              <!-- <el-button v-hasPermi="['erp:ErpCommodity:remove']" size="mini" type="text"
                         @click="handleDelete(scope.row)">删除
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total" @pagination="getList"/>
      </el-col>
    </el-row>

    <!-- 添加或修改商品管理对话框 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="open" append-to-body title="商品管理" width="50%">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="BasicInformation">
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品编号" prop="commodityNo">
                  <el-input v-model="form.commodityNo" placeholder="请输入商品编号"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品外用名称" prop="commodityName1">
                  <el-input v-model="form.commodityName1" placeholder="请输入商品外用名称"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品内用名称" prop="commodityName2">
                  <el-input v-model="form.commodityName2" placeholder="请输入商品内用名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品类别" prop="commodityTypes">
                  <el-cascader ref="cascader" v-model="form.commodityTypes" :options="options" :props="{
                    expandTrigger: 'hover',
                    value: 'commodityTypeId',
                    label: 'commodityTypeName',
                    checkStrictly: true,
                  }" clearable @change="handleTypeChange"></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品规格" prop="commoditySpec">
                  <el-input v-model="form.commoditySpec" placeholder="请输入商品规格"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品品牌" prop="commodityBrand">
                  <el-input v-model="form.commodityBrand" placeholder="请输入商品品牌"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="库存上限" prop="inventoryLimit">
                  <el-input v-model="form.inventoryLimit" placeholder="请输入库存上限"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="库存下限" prop="inventoryLowerLimit">
                  <el-input v-model="form.inventoryLowerLimit" placeholder="请输入库存下限"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商品状态" prop="commodityStatus">
                  <el-radio-group v-model="form.commodityStatus">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">停用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商品描述" prop="commodityDescribe">
                  <el-input v-model="form.commodityDescribe" placeholder="请输入内容" type="textarea"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商品图片" prop="commodityImg">
                  <image-upload v-model="form.commodityImg" @input="handleImageInput"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商品图文详情">
                  <editor v-model="form.commodityImgtext" :min-height="192"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="售价信息" name="Pricing">
            <div style="color:red;padding-top: 0px;">*首行单位必须是最小单位</div>
            <el-table v-loading="loading" :data="form.unitList" @selection-change="handleSelectionChange">
              <el-table-column align="center" label="基本单位" prop="unitName1">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.unitName1"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="辅助单位" prop="unitName2">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.unitName2"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="换算结果" prop="unitResult">
                <template slot-scope="scope">
                  <el-input  type="number" v-model="scope.row.unitResult"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="单位关系" prop="unitRelationship">
                <template slot-scope="scope">
                  {{ `1${scope.row.unitName1 ? scope.row.unitName1 : ''}=${scope.row.unitResult? scope.row.unitResult : ''}${scope.row.unitName2? scope.row.unitName2 : ''}` }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="零售价" prop="retailPrice">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.retailPrice" type="number"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="胜博价" prop="symbolPrice">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.symbolPrice" type="number"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="成本价" prop="costPrice">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.costPrice" type="number"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="经销价" prop="distriPrice">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.distriPrice" type="number"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="代理价" prop="agencyPrice">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.agencyPrice" type="number"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                <template slot-scope="scope">
                  <el-button  icon="el-icon-delete" size="mini" type="text"
                             @click="handleDeleteUnit(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top: 5px">
              <el-button style="width: 100%" type="info" @click="handleAddUnitRows()">新增一行</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改商品管理对话框 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="viewOpen" append-to-body title="商品管理" width="50%">
      <el-form ref="form" :model="form" label-width="90px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="BasicInformation">
            <el-row>
              <el-col :span="8">
                <el-form-item label="商品编号：">
                  {{ form.commodityNo }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="外用名称：">
                  {{ form.commodityName1 }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="内用名称：">
                  {{ form.commodityName2 }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="商品类别：">
                  {{ form.commodityTypeName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品规格：">
                  {{ form.commoditySpec }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品品牌：">
                  {{ form.commodityBrand }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="库存上限：">
                  {{ form.inventoryLimit }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="库存下限：">
                  {{ form.inventoryLowerLimit }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品状态：">
                  {{ form.commodityStatus == 1 ? '正常' : '停用' }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商品描述：">
                  {{ form.commodityDescribe }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="form.commodityImg" :span="24">
                <el-form-item label="商品图片：">
                  <image-preview v-for="item in form.commodityImg.split(',')" :key="item"
                                 :height="100" :src="item" :width="100"
                                 style="margin-right: 10px;"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="售价信息" name="Pricing">
            <el-table v-loading="loading" :data="form.unitList">
              <el-table-column align="center" label="基本单位" prop="unitName1">
              </el-table-column>
              <el-table-column align="center" label="辅助单位" prop="unitName2">
              </el-table-column>
              <el-table-column align="center" label="单位关系" prop="unitRelationship">
              </el-table-column>
              <el-table-column align="center" label="换算结果" prop="unitResult">
              </el-table-column>
              <el-table-column align="center" label="零售价" prop="retailPrice">
              </el-table-column>
              <el-table-column align="center" label="胜博价" prop="symbolPrice">
              </el-table-column>
              <el-table-column align="center" label="成本价" prop="costPrice">
              </el-table-column>
              <el-table-column align="center" label="经销价" prop="distriPrice">
              </el-table-column>
              <el-table-column align="center" label="代理价" prop="agencyPrice">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewOpen = false">关 闭</el-button>
      </div>
    </el-dialog>


    <!-- 商品导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" append-to-body width="400px">
      <el-upload ref="upload" :action="upload.url + '?updateSupport=' + upload.updateSupport" :auto-upload="false" :disabled="upload.isUploading"
                 :headers="upload.headers" :limit="1"
                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" accept=".xlsx, .xls" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip text-center">
          <div slot="tip" class="el-upload__tip">
            <el-checkbox v-model="upload.updateSupport"/>
            是否更新已经存在的商品数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link :underline="false" style="font-size:12px;vertical-align: baseline;" type="primary"
                   @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addErpCommodity, delErpCommodity, getErpCommodity, listErpCommodity, updateErpCommodity,} from "@/api/erp/ErpCommodity";
import {listErpCommodityType} from "@/api/erp/ErpCommodityType";
import {getToken} from "@/utils/auth";
import asc from "@/utils/asc";
import {formattedNumber} from "../../../utils/ruoyi";

export default {
  name: "ErpCommodity",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品管理表格数据
      ErpCommodityList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      viewOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 30,
        commodityNo: null,
        commodityName1: null,
        commodityType: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        commodityNo: [
          {required: true, message: "商品编码不能为空", trigger: "blur"},
        ],
        commodityName1: [
          {required: true, message: "商品外用名称不能为空", trigger: "blur"},
        ],
        commodityName2: [
          {required: true, message: "商品内用名称不能为空", trigger: "blur"},
        ],
        commodityTypes: [
          {required: true, message: "商品类型不能为空", trigger: "blur"},
        ],
      },
      // 商品类别配置选项
      commodityType: [],
      props: {
        multiple: true,
        checkStrictly: true,
        value: "commodityTypeId",
        label: "commodityTypeName",
      },
      // 左侧商品类别树options

      commodityTypeOptions: [],
      // 下拉商品类型
      options: [],
      defaultProps: {
        children: "children",
        label: "commodityTypeName",
        checkStrictly: true,
      },
      // tab页签
      activeName: "BasicInformation",
      // 列信息
      columns: [
        {key: 0, label: `商品编号`, visible: true},
        {key: 1, label: `商品名称`, visible: true},
        {key: 2, label: `商品类别`, visible: true},
        {key: 3, label: `品牌`, visible: true},
        {key: 4, label: `规格`, visible: true},
        {key: 5, label: `基本单位`, visible: true},
        {key: 6, label: `成本价`, visible: true},
        {key: 7, label: `当前库存`, visible: true},
        {key: 8, label: `库存上限`, visible: true},
        {key: 9, label: `库存下限`, visible: true},
        {key: 10, label: `操作`, visible: true}
      ],
      // 商品导入参数
      upload: {
        // 是否显示弹出层（商品导入）
        open: false,
        // 弹出层标题（商品导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的商品数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/erp/ErpCommodity/importData"
      },
    };
  },
  created() {
    this.getList();
    this.getListCommodityType();
  },
  methods: {
    formattedNumber,
    /** 查询商品管理列表 */
    getList() {
      this.loading = true;
      listErpCommodity(this.queryParams).then((response) => {
        this.ErpCommodityList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 获取商品类别 */
    getListCommodityType() {
      listErpCommodityType().then((response) => {
        this.options = this.handleTree(
          response.data,
          "commodityTypeId",
          "commodityTypePid"
        );
        this.commodityTypeOptions = [];
        const data = {
          commodityTypeId: 0,
          commodityTypeName: "全部",
          children: [],
        };
        data.children = this.handleTree(
          response.data,
          "commodityTypeId",
          "commodityTypePid"
        );
        this.commodityTypeOptions.push(data);
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.commodityId)
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.activeName = 'BasicInformation';
      this.form = {
        commodityNo: null,
        commodityName1: null,
        commodityName2: null,
        commodityType: null,
        commoditySpec: null,
        commodityBrand: null,
        commodityUnitId: null,
        inventoryLimit: null,
        inventoryLowerLimit: null,
        commodityImg: null,
        commodityImgtext: null,
        commodityDescribe: null,
        commodityStatus: 1,
        // 售价信息列表
        unitList: [],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let nodes = this.$refs.commodityType.getCheckedNodes();
      if (nodes.length > 0 && this.commodityType.length > 0) {
        let nodeIds = nodes.map((item) => item.value);
        this.queryParams.commodityType = nodeIds.join(",");
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.commodityType = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getErpCommodity(row.commodityId).then((response) => {
        this.form = response.data;
        this.form.commodityTypes = this.form.commodityType
          ?.split(",")
          .map(Number);
        this.open = true;
        this.title = "修改商品管理";
      });
    },
    /** 预览 */
    handleView(row) {
      this.reset();
      getErpCommodity(row.commodityId).then((response) => {
        response.data.commodityImg = !response.data.commodityImg ? '' : response.data.commodityImg;
        this.form = response.data;
        this.viewOpen = true;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.commodityType = this.form.commodityTypes?.join(",");
          if (this.form.commodityImgtext) {
            this.form.commodityImgtext = asc.encrypt(
              this.form.commodityImgtext
            );
          }
          if (this.form.unitList.length == 0) {
            this.$message.error("请至少添加一条商品售价信息！");
            return;
          }
          if (this.form.commodityId != null) {
            updateErpCommodity(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addErpCommodity(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.commodityType =
        data.commodityTypeId == 0 ? null : data.commodityTypeId;
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const commodityIds = row.commodityId || this.ids;
      this.$modal
        .confirm('是否确认删除商品管理编号为"' + commodityIds + '"的数据项？')
        .then(function () {
          return delErpCommodity(commodityIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "erp/ErpCommodity/export",
        {
          ...this.queryParams,
          exportIds: this.ids?.join(',')
        },
        `商品列表_${new Date().getTime()}.xlsx`
      );
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "商品导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('erp/ErpCommodity/importTemplate', {}, `商品导入_template_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 商品类别选择
    handleTypeChange(e) {
      let nodesObj = this.$refs["cascader"].getCheckedNodes();
      if (nodesObj.length > 0) {
        let code = [];
        nodesObj[0].pathNodes.forEach((i) => {
          code.push(i.data.commodityTypeNo);
        });
        // this.form.supplierTypeCode = code?.join(',');
      }
    },
    /** 新增一行 */
    handleAddUnitRows() {
      this.form.unitList.push({
        id: this.parseTime(new Date(), "{yyyy}{mm}{dd}{h}{s}{m}"),
      });
    },
    /** 删除 */
    handleDeleteUnit(row) {
      const index = this.form.unitList.indexOf(row);
      if (index > -1) {
        this.form.unitList.splice(index, 1);
      }
    },
    // 图片上传成功
    handleImageInput(e) {
      this.form.commodityImg = e;
    },
    /** 数值累计 */
    numberSum(list) {
      let sum = 0;
      list.forEach((i) => {
        sum += i.commodityNumber;
      });
      return sum;
    },
  },
};
</script>
<style lang="css" scoped>
  ::v-deep .el-table .cell {
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  .el-select {
    width: 100%;
  }

  .el-cascader--medium {
    width: 100%;
  }

  ::v-deep .el-table__cell{
    padding: 0px;
  }
</style>
